<template>
  <div class="wrapper">
    <div class="detail-top clearfix">
      <div class="detail-goods">
        <div class="detail-show">
          <div class="origin-show">
            <div class="zoomup"></div>
            <img class="big-pic" :src="detail.commodityImgurl" :alt="detail.commodityName" />
          </div>
          <div class="zoom-show">
            <img src="" alt="" />
          </div>
        </div>
        <div class="detail-info">
          <div class="item-title">{{detail.commodityName}}</div>
          <div class="item-price">
            <span class="now">￥{{detail.commodityPrice}}</span>
          </div>
          <ul class="item-data clearfix">
            <li class="col-4">收藏<span class="txt-theme ml10">228人</span></li>
          </ul>
          <div class="sku-info">
            <div class="prop">
              <div class="dt">品牌：</div>
              <div class="dd">
                <ul class="chose-img">
                  <li>{{brandName}}</li>
                </ul>
              </div>
            </div>
            <div class="prop">
              <div class="dt">类别：</div>
              <div class="dd">
                <ul class="chose-common">
                  <li>{{categoryName}}</li>
                </ul>
              </div>
            </div>
            <div class="prop">
              <div class="dt">数量：</div>
              <div class="dd">
                <div class="mod-numbox chose-num" data-max="30">
                  <span class="count-minus"></span>
                  <input v-model="num" class="count-input" />
                  <span class="count-plus"></span>
                </div>
                <div class="stock">(库存{{detail.commodityNum}}件)</div>
              </div>
            </div>
          </div>
          <div class="item-action">
            <a @click="toOrder()" class="buy-now">立即购买</a>
            <a href="cart.html" class="add-cart">加入购物车</a>
          </div>
          <div class="item-extend">
            <!-- <a href="" class="fav"><i class="iconfont icon-star"></i>收藏</a> -->
            <a href="" class="fav">已收藏</a>
          </div>
        </div>
      </div>
    </div>
    <!-- 商品推荐 -->

    <div class="detail-bottom clearfix">
      <div class="detail-main">
        <div class="detail-tabs">
          <a class="item" href="javascript:;">详情描述</a>
        </div>
        <div class="tab-con">
          <div class="mod-type-cont">
            {{detail.commodityIntroduce}}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import http from '../../../base/api/http'
export default {
  name: 'GoodWrapper',
  computed: {
  },
  props: {
    detail: {
      type: Object,
      default: () => {
        return {
          commodityId: null,
          commodityImgurl: null,
          commodityName: null,
          commodityPrice: null,
          commodityNum: null,
          commodityIntroduce: null,
          brandId: null,
          categoryId: null
        }
      }
    },
    brandName: null,
    categoryName: null
  },
  data () {
    return {
      num: 1
    }
  },
  methods: {
    toOrder () {
      let data = {
        commodityId: this.detail.commodityId,
        commodityNum: this.num
      }
      this.$router.push({path: '/confirmOrder', query: {type: 'commodity', data: data}})
    }
  },
  mounted () {
    http.requestGet('/java/api/brand/getBrandById', {
      'brandId': this.detail.brandId
    }).then((res) => {
      if (res.status === 0) {
        this.brandName = res.data.brandName
      }
    })

    http.requestGet('/java/api/category/findByCategoryId', {
      'categoryId': this.detail.categoryId
    }).then((res) => {
      if (res.status === 0) {
        this.categoryName = res.data.categoryName
      }
    })
  }
}
</script>
<style>
</style>
